<template>
  <div>
    <el-container>
      <splitpanel title="库存分类" icon="company" :request="'product'" :department="department" :default-props="defaultProps"
        @handleNodeClick="handleNodeClick" :stockshow='true'/>
      <el-main class="el-mainBox">
        <div class="rightLayout">
          <el-header>
            <div class="report_header" ref="headerHeight">
              <div class="report_header_left"></div>
              <div style="display: flex;flex-direction: row;justify-content:space-between;width: 100%;">
                <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
                  <div class="report_header_query" v-if="mchType==0||mchType==3">
                    <el-select v-model="query.sysMchId" clearable placeholder="请选择商户"
                      filterable value-key="id" :filter-method="querySysmch" @change="changeSysMch">
                      <el-option v-for="item in mchIdOptions" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="report_header_query">
                    <el-select v-model="query.product" clearable placeholder="请选择商品" filterable :filter-method="queryProduct"
                      @focus="getProductList">
                      <el-option v-for="(item, index) in productOptions" :key="item.productName + index" :label="item.productName"
                        :value="item.productName" />
                    </el-select>
                  </div>
                  <div class="report_header_query">
                    <el-select v-model="query.brandId" clearable placeholder="请选择品牌" filterable :filter-method="queryBrand"
                      @focus="getBrandList">
                      <el-option v-for="item in brandIdOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </div>
                  <div class="report_header_query">
                    <el-select v-model="query.shopId" clearable placeholder="请选择仓库" @focus="getShop">
                      <el-option v-for="item in shopIdOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </div>
                </div>
                <div>
                <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" @click="queryClick">查询</el-button>
                  <ExportList2Excel style='margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport" name="导出" />
                </div>
               </div>
              </div>
          </el-header>
          <div class="pd10">
            <el-table :data="productList" stripe border :height="curHeight" style="width: 100%">
              <el-table-column label="序号" type="index" width="50" align="center" />
              <el-table-column prop="shopName" label="仓库名称" width="150" />
              <el-table-column prop="sn" label="货号" width="110" />
              <el-table-column prop="productName" label="商品名称" min-width="200" />
              <el-table-column prop="unit" label="单位" width="70" />
              <el-table-column prop="spec1" label="规格" width="150" />
              <el-table-column prop="stock" label="库存量" width="70" align="center" />
              <el-table-column prop="pendingStock" label="待入库" width="70" align="center" />
              <el-table-column prop="allocatedStock" label="待出库" width="70" align="center" />
              <el-table-column prop="price" label="销售价" width="80" align="center" />
              <el-table-column prop="totalAmt" label="库存金额" width="80" align="center" />
            </el-table>
          </div>
          <div style="height: 50px;padding-left: 10px;border-top: 1px solid #eeeeee">
            <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadStock" />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  import ExportList2Excel from "@/components/ExportList2Excel";
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import loadMore from '@/utils/loadMore.js'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import splitpanel from '@/components/SplitPanel'
  import Pagination from '@/components/Pagination'
   import CategoryPanel from '@/components/CategoryPanel'
  import {
    category,
    list
  } from '@/api/stock'
  // import { list as productList } from '@/api/product'
  import {
    list as brandList
  } from '@/api/brand'
  import {
    list as shopList
  } from '@/api/shop'
  export default {
    name: 'stock-list',

    directives: {
      permission,
      loadMore
    },
    components: {
      ExportList2Excel,
      splitpanel,
      Pagination,
    },
    filters: {}, // 过滤器
    data() {
      return {
        request: 'product',
        department: [],
        queryType: false,
        curHeight: null,
        mchType: '',
        mchIdOptions: [],
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        query: {
          sysMchId: '',
          product: '',
          brandId: '',
          shopId: ''
        },
        pageNum: 1,
        pageSize: 20,
        printing:5000,
        total: 0,
        productCategoryId: '',
        productList: [],
        productOptions: [],
        brandIdOptions: [],
        shopIdOptions: []
      }
    },
    watch: {},
    activated() {
      this.payLoads = new Date().getTime()
    },
    created() {
      this.loadTree()
      this.loadStock()
    },
    mounted() {
      this.beforeMount()
      this.comeIn()
    },
    methods: {
      handleExport() {
        let _this = this
        var loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let data = {}
        data.tHeader = ["仓库名称","货号", "商品名称","单位","规格", '库存量','销售价','库存金额']
        data.filterVal = ["shopName","sn","productName","unit","spec1",'stock','price','totalAmt']
        data.filename = "商品库存查询";

        const params = new URLSearchParams()
        params.append('productCategoryId', this.productCategoryId)
        params.append('pageSize', this.printing)
        params.append('pageNum', this.pageNum)
        params.append('productName', this.query.product)
        params.append('brandId', this.query.brandId)
        params.append('shopId', this.query.shopId)
        list(params).then(res => {
          data.list = res.data.data

          _this.$refs.exportList2Excel.handleDownload(data);
          loading.close();

          if(data.list.length==this.printing){
            this.pageNum++
            console.log(this.pageNum);
            this.handleExport()
          }
          else{
            return;
          }
        }).catch(error => {
          _this.$refs.exportList2Excel.unlockLoading()
          loading.close();
          console.log('error!!')
        })
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 224 // 减去页面上固定高度height
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 270 // 减去页面上固定高度height
            }
          })()
        }
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224 // 减去页面上固定高度height
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight
          this.curHeight = h - 224 // 减去页面上固定高度height
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight
          this.curHeight = h - 270 // 减去页面上固定高度height
        }
      },
      handleNodeClick(data) {
        this.productCategoryId = data.id
        this.loadStock()
      },
      loadTree() {
        const _this = this
        category().then(response => {
          console.log(response)
          if (response.type == 'success') {
            let allCategory = [{
              id: '',
              name: '全部',
              childrens: response.data
            }]
            _this.department = allCategory
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            })
          }
        }).catch(error => {})
      },

      loadStock() {
        const params = new URLSearchParams()
        params.append('productCategoryId', this.productCategoryId)
        params.append('pageSize', this.pageSize)
        params.append('pageNum', this.pageNum)
        params.append('productName', this.query.product)
        params.append('brandId', this.query.brandId)
        params.append('shopId', this.query.shopId)
        list(params).then(res => {
          console.log(res)
          this.productList = res.data.data
          this.total = res.data.total
        }).catch(err => {
          console.log(err)
        })
      },
      queryProduct(query) { // 查询商品
        this.productOptions = []
        list({
          productName: query
        }).then(res => {
          this.$set(this.$data, 'productOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      getProductList() { // 加载商品
        list().then(res => {
          this.$set(this.$data, 'productOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      queryBrand(query) { // 查询品牌
        this.brandIdOptions = []
        brandList({
          name: query
        }).then(res => {
          this.$set(this.$data, 'brandIdOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      getBrandList() { // 加载品牌
        brandList().then(res => {
          this.$set(this.$data, 'brandIdOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      getShop() { // 获取仓库
        shopList().then(res => {
          this.$set(this.$data, 'shopIdOptions', res.data.data)
        }).catch(err => {
          console.log(err)
        })
      },
      queryClick() {
        this.loadStock()
      },
      resetClick() {
        this.query.product = ''
        this.query.brandId = ''
        this.query.shopId = ''
        this.loadStock()
      },
    nodeClick(data) {
        this.productCategoryId = data.id
        this.loadStock()
      },
    }
  }
</script>

<style scoped lang="scss">
  .table-container {
    padding: 10px;
    box-sizing: border-box;
  }

  .el-mainBox {
    padding: 0 !important;
  }

  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/.el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
  }

  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }

  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
</style>
